<template>
    <div>
      <!--工具栏-->
      <div class="crud-group">
        <!-- 搜索 -->
        <el-input
        v-model="gitname"
        clearable
        size="small"
        placeholder="请输入git标识"
        style="width:200px"
        class="filter-item"
      />
        <div style="display: flex;">
          <el-button
            type="success"
            icon="el-icon-search"
            @click="search"
          >搜索</el-button>
          <el-button
            type="warning"
            icon="el-icon-refresh-left"
            @click="reset"
          >重置</el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addClick"
          >新增</el-button>
        </div>
      </div>
      <!--表格渲染-->
      <el-table
        v-loading="loading"
        :data="clusterList"
        border
      >
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
        />
        <el-table-column
          prop="gitname"
          label="git标识"
          min-width="80px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="gitpath"
          label="git路径"
          min-width="80px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="username"
          label="用户名"
          min-width="80px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="periodfilepath"
          label="周期脚本路径"
          min-width="80px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="initfilepath"
          label="初始化脚本路径"
          min-width="80px"
          show-overflow-tooltip
        />
        <el-table-column
          prop="servicefilepath"
          label="推送下载稽核脚本路径"
          min-width="80px"
          show-overflow-tooltip
        />
        <el-table-column
              label="是否禁用"
              align="center"
              prop="disabled"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.disabled"
                  active-color="#ff4949"
                  inactive-color="#dcdfe6"
                  active-value = "true"
                  @change="changeEnabled(scope.row, scope.row.disabled)"
                />
              </template>
            </el-table-column>
        <el-table-column
          width="100px"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="editClick(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="deleteClick(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <!--分页组件-->
        <el-pagination
          :current-page="current"
          :page-size="size"
          layout="prev, pager, next,sizes,total"
          :total="length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- 编辑表单 -->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="closeEdit"
        :visible.sync="openEdit"
        :title="title"
        width="1000px"
      >
        <el-form
          ref="jqForm"
          :inline="true"
          label-width="180px"
          :rules="rules"
          :model="jqForm"
        >
        <el-form-item
            label="git标识"
            prop="gitname"
          >
            <el-input
              v-model="jqForm.gitname"
              style="width: 210px"
              placeholder="请输入"
            />
          </el-form-item>
        <el-form-item
            label="git路径"
            prop="gitpath"
          >
            <el-input
              v-model="jqForm.gitpath"
              style="width: 210px"
              placeholder="请输入git路径"
            />
          </el-form-item>
          <el-form-item
            label="用户名"
            prop="username"
          >
            <el-input
              v-model="jqForm.username"
              style="width: 210px"
              placeholder="如有请输入"
            />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              v-model="jqForm.password"
              style="width: 210px"
              show-password
              placeholder="如有请输入"
            />
          </el-form-item>
          <el-form-item
            label="初始化脚本路径"
            prop="initfilepath"
          >
            <el-input
              v-model="jqForm.initfilepath"
              placeholder="如有请输入"
              style="width: 210px"
              
            />
          </el-form-item>
          <el-form-item
            label="推送下载稽核脚本路径"
            prop="servicefilepath"
          >
            <el-input
              v-model="jqForm.servicefilepath"
              style="width: 210px"
              placeholder="如有请输入"
            />
          </el-form-item>
          <el-form-item
            label="周期脚本路径"
            prop="periodfilepath"
          >
            <el-input
              v-model="jqForm.periodfilepath"
              style="width: 210px"
              placeholder="如有请输入"
            />
          </el-form-item>
        </el-form>
        <div style="margin-top: 20px; margin-left: 45%">
          <el-button
            type="primary"
            plain
            @click="closeEdit"
          >取消</el-button>
          <el-button
            type="primary"
            @click="submit"
          >确认</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import gitConfigApi from '@/api/script/config/gitConfig'

  
  export default {
    name: 'DataDesensitizationRules',
    data() {
      return {
        loading: false,
        current: 1,
        size: 10,
        length: 0,
        gitname: '',
        clusterList:[],
        openEdit: false,
        jqForm: {
          gitname:'',
          gitpath:'',
          username:'',
          password:'',
          initfilepath:'',
          servicefilepath:'',
          periodfilepath:'',
        },
        title: '',
        versionList: ['CDH 6.3.2 (Parcel)'],
        rules: {
          gitpath: [
            { required: true, message: '请填写git路径', trigger: 'blur' }
          ],
          gitname: [
            { required: true, message: '请填写git标识', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData(gitname, resetPage) {
        if (resetPage) {
          this.current = 1
        }
        this.loading = true
        var data = {
          current: this.current,
          size: this.size,
          gitname: gitname
        }
        gitConfigApi.findListByPage(data)
          .then((data) => {
            console.log(data);
            this.length = data.total
            if (data.records.length === 0) {
              this.jqForm = {}
            } else {
              this.jqForm = data.records[0]
            }
            
            this.clusterList = data.records
            this.loading = false
          })
          .catch(() => { })
      },
      search() {
        this.current = 1
        this.initData(this.gitname)
      },
      reset() {
        this.gitname = ''
        this.current = 1
        this.initData(this.gitname)
      },
      // 分页
      handleSizeChange(val) {
        this.current = 1
        this.size = val
        this.initData()
      },
      // 分页
      handleCurrentChange(val) {
        this.current = val
        this.initData(null,false)
      },
      // 改变是否禁用状态
      changeEnabled(data, val) {
        this.$confirm('此操作将'+(val?'禁用':'取消禁用')+'此配置信息, 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        gitConfigApi.edit(data).then(res=>{
          console.log(data);
        }).catch(()=>{
          data.disabled = !data.disabled
        })
        }).catch(()=>{
          data.disabled = !data.disabled
        })
      },
      editClick(row) {
        this.title = '编辑'
        var temp = {
          id:row.id,
          gitname:row.gitname,
          gitpath:row.gitpath,
          username:row.username,
          password:row.password,
          initfilepath:row.initfilepath,
          servicefilepath:row.servicefilepath,
          periodfilepath:row.periodfilepath
        }
        this.jqForm = temp
        this.openEdit = true
      },
      closeEdit() {
        this.openEdit = false
        this.$refs['jqForm'].resetFields()
        this.jqForm = {}
      },
      deleteClick(row) {
        const h = this.$createElement
        this.$msgbox(
          {
            title: '提示',
            message: h('p', null, [
              h('span', { style: 'color: red' }, '此条数据'),
              h('span', null, '为git配置信息，是否删除？')
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }
        ).then(() => {
          gitConfigApi.del(row.id).then((data) => {
            this.initData()
          })
        }).catch(() => {
          return
        })
      },
      submit() {
        this.$refs['jqForm'].validate((valid) => {
          if (valid) {
            if (this.title === '编辑') {
              gitConfigApi.edit(this.jqForm).then((data) => {
                this.initData()
                this.openEdit = false
              })
            } else {
              gitConfigApi.add(this.jqForm).then((data) => {
                this.initData()
                this.openEdit = false
                this.jqForm = {}
              })
            }
          } else {
            return false
          }
        })
      },
  
      addClick() {
        this.jqForm = {}
        this.title = '新增'
        this.openEdit = true
      }
    }
  }
  </script>
  